<template>
  <div>
    <div class="layout">
      <a-layout id="components-layout-demo-top-side">
        <a-layout-header class="header">
          <div class="logo" />
          <div class="right">
            <a-icon
              type="bell"
              style="margin: 0; color: white; font-size: 25px"
              @click="notice"
            />
            <div class="headshot" @click="img">
              <span style="color:white; position:relative; left:65px">寡剧者</span>
            </div>
          </div>
        </a-layout-header>
        <!-- 消息弹窗 -->
        <div class="notice-pop" v-show="isShow">
          <span>您有99+条消息未读取</span>
        </div>
        <!-- 图片弹窗 -->
        <div class="img-pop" v-show="isImg">
          <ul>
            <li><router-link to="" style="color: rgb(226, 87, 87);">修改密码</router-link></li>
            <li><router-link to="">修改头像</router-link></li>
            <li><router-link to="">退出登录</router-link></li>
          </ul>
        </div>

        <a-layout-content>
          <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-sider width="200" style="background: #fff">
              <a-menu
                mode="inline"
                :default-selected-keys="['1']"
                :default-open-keys="['sub1']"
                style="height: 100%"
              >
                <a-sub-menu key="sub1">
                  <span slot="title"
                    >
                    <a-icon type="user" /><router-link to="/index"
                      >首页</router-link
                    >
                    </span
                  >
                </a-sub-menu>
                <a-sub-menu key="sub2">
                  <span slot="title"
                    ><a-icon type="laptop" /><router-link to="/user"
                      >用户管理</router-link
                    ></span
                  >
                  <a-menu-item key="1"
                    ><router-link to="/user">用户列表</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub3">
                  <span slot="title">
                    <a-icon type="inbox" /><router-link to="/complain"
                      >公司管理</router-link
                    ></span
                  >
                  <a-menu-item key="2"
                    ><router-link to="/complain">公司列表</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub4">
                  <span slot="title"
                    ><a-icon type="key" /><router-link to="/Audit"
                      >审核管理</router-link
                    ></span
                  >
                  <a-menu-item key="3"
                    ><router-link to="/Audit">公司入驻审核</router-link></a-menu-item
                  >
                  <a-menu-item key="4"
                    ><router-link to="/AuditDetil">岗位发布审核</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub5">
                  <span slot="title"
                    ><a-icon type="fork" /><router-link to="/resumn"
                      >简历管理</router-link
                    ></span
                  >
                  <a-menu-item key="16"
                    ><router-link to="/resumn">简历列表</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub6">
                  <span slot="title"
                    ><a-icon type="menu" /><router-link to=""
                      >分类管理</router-link
                    ></span
                  >
                  <a-menu-item key="5"
                    ><router-link to="">分类列表</router-link></a-menu-item
                  >
                  <a-menu-item key="6"
                    ><router-link to="">行业列表</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub7">
                  <span slot="title"
                    ><a-icon type="skin" /><router-link to=""
                      >banner管理</router-link
                    ></span
                  >
                  <a-menu-item key="7"
                    ><router-link to="">banner列表</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub8">
                  <span slot="title"
                    ><a-icon type="tags" /><router-link to=""
                      >资讯页面管理</router-link
                    ></span
                  >
                  <a-menu-item key="8"
                    ><router-link to="">资讯列表</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub9">
                  <span slot="title"
                    ><a-icon type="ci" /><router-link to=""
                      >全局设置</router-link
                    ></span
                  >
                  <a-menu-item key="9"
                    ><router-link to="">常用语设置</router-link></a-menu-item
                  >
                  <a-menu-item key="10"
                    ><router-link to="">热门关键字</router-link></a-menu-item
                  >
                  <a-menu-item key="11"
                    ><router-link to="">职位套餐</router-link></a-menu-item
                  >
                  <a-menu-item key="12"
                    ><router-link to="">初始密码</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub10">
                  <span slot="title"
                    ><a-icon type="shop" /><router-link to=""
                      >订单管理</router-link
                    ></span
                  >
                  <a-menu-item key="13"
                    ><router-link to="">订单管理</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub11">
                  <span slot="title"
                    ><a-icon type="team" /><router-link to=""
                      >人员管理</router-link
                    ></span
                  >
                  <a-menu-item key="14"
                    ><router-link to="">人员列表</router-link></a-menu-item
                  >
                </a-sub-menu>
                <a-sub-menu key="sub12">
                  <span slot="title"
                    ><a-icon type="usergroup-delete" /><router-link to=""
                      >权限设置</router-link
                    ></span
                  >
                  <a-menu-item key="15"
                    ><router-link to="">权限列表</router-link></a-menu-item
                  >
                </a-sub-menu>
              </a-menu>
            </a-layout-sider>
            <a-layout-content
              :style="{ padding: '0 24px', minHeight: '280px' }"
            >
              <router-view></router-view>
            </a-layout-content>
          </a-layout>
        </a-layout-content>
      </a-layout>
    </div>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      isImg: false,
    };
  },
  methods: {
    notice() {
      this.isShow = !this.isShow;
    },
    img() {
      this.isImg = !this.isImg;
    },
  },
};
</script>

<style>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background-image: url("../../src/img/login-fs.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  margin: 16px 28px 16px 0;
  float: left;
}

#components-layout-demo-top-side .right {
  float: right;
  margin: 0;
}

.notice-pop {
  width: 180px;
  height: 38px;
  line-height: 38px;
  border-radius: 10px;
  text-align: center;
  color: rgb(226, 87, 87);
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
  background-color: #eeebeb;
  opacity: 0.6;
  right: 135px;
  top: 70px;
}

.headshot {
  background-image: url("../../src/img/神里凌人.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height: 50px;
  display: inline-block;
  width: 50px;
  /* margin-top: 20px; */
  margin-left: 20px;
  position: relative;
  top: 8px;
  border-radius: 50%;
  cursor: pointer;
  margin-right: 50px;
}

.img-pop {
  width: 100px;
  height: 85px;
  line-height: 20px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid rgba(187, 187, 187, 100);
  position: absolute;
  background-color: #eeebeb;
  opacity: 0.7;
  right: 25px;
  top: 65px;
}
.img-pop li{
  margin-bottom: 5px;
  list-style: none;
  
}

</style>